<template>
    <view class="globe_back">
        <map class="mapW" :latitude="latitude" :longitude="longitude" :markers="covers" :show-location="true" :enable-building="true" @markertap="markertap"></map>

        <view class="back_fff list">
            <view class="f_28">
                接单员正在赶往车辆位置，预计
                <text class="cl_3377FF fw_bold">{{lists.expected_arrival}}</text>
                到达
            </view>
            <view class="flex justify_content_between pt_24">
                <view class="round"></view>
                <view class="title">{{lists.vehicle.trailer_address}}</view>
            </view>
            <view class="flex justify_content_between pt_24">
                <view class="round" style="background: #3377ff"></view>
                <view class="title">
                    <view class="address">{{lists.Destination.user_location}}</view>
                    <view>
                        <text class="name">{{lists.Destination.consignee}}</text>
                        <text class="iphone">{{lists.Destination.mobile}}</text>
                    </view>
                </view>
            </view>
        </view>
        <!-- 接单员 -->
        <view class="flex justify_content_between store">
            <view class="flex">
                <image class="storeImg" :src="lists.order_taker.avatar" mode=""></image>
                <view>
                    <view class="storeTitle">{{lists.order_taker.name}}</view>
                    <view class="salesVolume"><u-rate :count="count" v-model="lists.order_taker.star" active-color="#FF6401" inactive-color="#F7F7F7" size="16" gutter="2"></u-rate></view>
                </view>
            </view>
            <view>
                <image class="address" :src="url + 'icon_dpdz.png'" mode=""></image>
                <text class="addressText">电话联系</text>
            </view>
        </view>
        <!-- 现场照片 -->
        <view class="store">
            <view class="title">现场照片</view>
			<view class="info" v-if="lists.product_type==5">{{lists.on_site_content}}</view>
                <view class="infoImgBox">
                    <image class="infoimg" :src="item" mode="widthFix" v-for="(item,index) in lists.on_site_photos"></image>
        <!--            <image class="infoimg" src="@/static/imgs/img.png" mode="widthFix"></image>
                    <image class="infoimg" src="@/static/imgs/img.png" mode="widthFix"></image> -->
                </view>
        </view>
		<view class="store" v-if="lists.product_type==5">
		    <view class="flex justify_content_between detailed">
		        <view>服务类型</view>
		        <view>{{lists.servicetype}}</view>
		    </view>
		    <view class="flex justify_content_between detailed">
		        <view>服务位置</view>
		        <view>{{lists.Destination.user_location}}</view>
		    </view>
		    <view class="flex justify_content_between detailed">
		        <view>预约时间</view>
		        <view>{{lists.time.service_time}}</view>
		    </view>
		    <view class="flex justify_content_between detailed">
		        <view>姓名</view>
		        <view>{{lists.Destination.consignee}}</view>
		    </view>
		    <view class="flex justify_content_between detailed">
		        <view>联系电话</view>
		        <view>{{lists.Destination.mobile}}</view>
		    </view>
		    <view class="flex justify_content_between detailed" v-if="lists.time.servicetype_id==1">
		        <view>使用次数</view>
		        <view>{{lists.time.service_num}}次</view>
		    </view>
		    <view class="flex justify_content_between detailed">
		        <view>是否加急</view>
		        <view v-if="lists.time.service_j==1">是</view>
				<view v-if="lists.time.service_j!=1">否</view>
		    </view>
		    <view class="flex justify_content_between detailed" v-if="lists.time.servicetype_id==2">
		        <view>预算报价</view>
		        <view class="fw_bold" style="color: #ff6401">￥3215.02</view>
		    </view>
		</view>
		<view class="store" v-if="lists.product_type==4">
		    <view class="flex justify_content_between detailed">
		        <view>车型</view>
		        <view>{{lists.defective_vehicle_model}}</view>
		    </view>
		    <view class="flex justify_content_between detailed">
		        <view>车辆位置</view>
		        <view>{{lists.vehicle.trailer_address}}</view>
		    </view>
		    <view class="flex justify_content_between detailed">
		        <view>目的地</view>
		        <view>{{lists.Destination.user_location}}</view>
		    </view>
		    <view class="flex justify_content_between detailed">
		        <view>距离</view>
		        <view>{{lists.vehicle.km}}km</view>
		    </view>
		    <view class="flex justify_content_between detailed">
		        <view>姓名</view>
		        <view>{{lists.Destination.consignee}}</view>
		    </view>
		    <view class="flex justify_content_between detailed">
		        <view>联系电话</view>
		        <view>{{lists.Destination.mobile}}</view>
		    </view>
		</view>
		<view class="store" v-if="lists.product_type==6">
		    <view class="flex justify_content_between detailed">
		        <view>开锁类型</view>
		        <view>{{lists.vehicle.trailer_address}}</view>
		    </view>
		    <view class="flex justify_content_between detailed">
		        <view>服务位置</view>
		        <view>{{lists.Destination.user_location}}</view>
		    </view>
		    <view class="flex justify_content_between detailed">
		        <view>姓名</view>
		        <view>{{lists.Destination.consignee}}</view>
		    </view>
			<view class="flex justify_content_between detailed">
			    <view>联系电话</view>
			    <view>{{lists.Destination.mobile}}</view>
			</view>
			<view class="flex justify_content_between detailed">
			    <view>预算报价</view>
			    <view>￥{{lists.budget_quotation}}</view>
			</view>
		</view>
		<view class="store" v-if="lists.product_type==5&&lists.time.servicetype_id==1">
		    <view class="flex justify_content_between detailed">
		        <view>订单金额</view>
		        <view>￥{{lists.money.goods_price}}</view>
		    </view>
		    <view class="flex justify_content_between detailed">
		        <view>优惠</view>
		        <view>￥{{lists.money.coupon_price}}</view>
		    </view>
		    <view class="flex justify_content_between detailed">
		        <view>合计</view>
		        <view class="fw_bold" style="color: #ff6401">￥{{lists.money.order_price}}</view>
		    </view>
		</view>
		<view class="store" v-if="lists.product_type==4">
		    <view class="flex justify_content_between detailed">
		        <view>拖车金额</view>
		        <view>￥{{lists.money.goods_price}}</view>
		    </view>
		    <view class="flex justify_content_between detailed">
		        <view>优惠</view>
		        <view>￥{{lists.money.coupon_price}}</view>
		    </view>
		    <view class="flex justify_content_between detailed">
		        <view>合计</view>
		        <view class="fw_bold" style="color: #ff6401">￥{{lists.money.order_price}}</view>
		    </view>
		</view>
        <!-- 金额 -->
        <view class="store" v-if="false">
            <view class="flex justify_content_between detailed">
                <view>车型</view>
                <view>小轿车</view>
            </view>
            <view class="flex justify_content_between detailed">
                <view>车辆位置</view>
                <view>贵阳市南明区解放路255号</view>
            </view>
            <view class="flex justify_content_between detailed">
                <view>目的地</view>
                <view>贵阳市南明区解放路255号</view>
            </view>
            <view class="flex justify_content_between detailed">
                <view>距离</view>
                <view>约12km</view>
            </view>
            <view class="flex justify_content_between detailed">
                <view>姓名</view>
                <view>王先生</view>
            </view>
            <view class="flex justify_content_between detailed">
                <view>联系电话</view>
                <view>172****2111</view>
            </view>
        </view>
        <view class="store" v-if="false">
            <view class="flex justify_content_between detailed">
                <view>拖车金额</view>
                <view>￥2000</view>
            </view>
            <view class="flex justify_content_between detailed">
                <view>优惠</view>
                <view>￥0.00</view>
            </view>
            <view class="flex justify_content_between detailed">
                <view>合计</view>
                <view class="fw_bold" style="color: #ff6401">￥3215.02</view>
            </view>
        </view>
        <view style="height: 20px"></view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            count: 5,
            value: 5,
            latitude: 39.909,
            longitude: 116.39742,
            covers: [],
            locationData: [
                {
                    name: '我的位置',
                    location: { latitude: 39.909, longitude: 116.39742 },
                    id: 0
                },
                {
                    name: '服务位置',
                    location: { latitude: 39.909, longitude: 116.39742 },
                    id: 1
                }
            ],
			id:0,
			lists:'',
			url:''
        };
    },
    onLoad(e) {
        // this.init();
		this.id=e.id
		this.list()
		this.url = this.baseUrl + this.imgPath;
    },
    methods: {
		list(){
			this.$.ajax(1, "POST", "users/service_order", {
					order_id:this.id,
					lat:39.222,
					lng:117.333,
				}, (res) => {
					if(res.code==200){
						// this.$.ti_shi(res.msg)
						this.lists=res.data
						 // setTimeout(()=>{
							//  this.$emit('handleGetOrderList')
						 // },1000)
						 
					}else{
						this.$.ti_shi(res.msg)
					}
				})
		},
        init() {
            let _this = this;
            uni.getLocation({
                type: 'gcj02',
                success(e) {
                    _this.latitude = e.latitude;
                    _this.longitude = e.longitude;
                    console.log(e);
                    _this.getTeamList();
                }
            });
        },

        isBack() {
            this.$api.authBack();
            // this.isOpen()
        },
        setExchange() {
            // this.locationData.reverse();
        },
        isOpen() {
            this.$refs.popup.open();
        },
        isClose() {
            this.$refs.popup.close();
        }
    }
};
</script>

<style scoped lang="scss">
.mapW {
    width: 100%;
    min-height: 40vh;
}
.cover-box {
    margin-top: 160rpx;
    padding: 0 32rpx;
    .log-1 {
        width: 16rpx;
        height: 16rpx;
        border-radius: 16rpx;
        background-color: #3377ff;
    }
    .log-line {
        width: 2rpx;
        height: 40rpx;
        background-color: #ccced1;
        margin: 10rpx 0;
    }
    .log-2 {
        width: 16rpx;
        height: 16rpx;
        border-radius: 16rpx;
        background-color: #ff6401;
    }
}
.next-icon {
    position: fixed;
    left: 32rpx;
    top: 100rpx;
}
.list {
    padding: 24rpx;
    border-radius: 24rpx;
    margin: 24rpx 32rpx;
    .round {
        width: 16rpx;
        height: 16rpx;
        border-radius: 50%;
        background: #00091a;
        font-size: 28rpx;
        margin-top: 16rpx;
    }
    .type {
        color: #3377ff;
        font-weight: bold;
    }
    .time {
        color: #ccced1;
    }
    .title {
        width: 90%;
        color: #00091a;
        font-size: 32rpx;
        font-weight: bold;
    }
    .address {
        display: inline-block;
        white-space: nowrap;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .name {
        font-weight: normal;
        color: #333a47;
        margin-right: 24rpx;
    }
    .iphone {
        font-weight: normal;
        color: #999ca3;
    }
    .money {
        text-align: right;
        color: #666b75;
    }
    .money text {
        color: #ff6401;
        font-weight: bold;
        font-size: 32rpx;
    }
    .btn {
        text-align: right;
    }
    .cance {
        width: 160rpx;
        height: 68rpx;
        line-height: 68rpx;
        border-radius: 8rpx;
        color: #666b75;
        text-align: center;
        border: 2rpx solid #ccced1;
        margin-top: 24rpx;
    }
    .buy {
        width: 160rpx;
        height: 68rpx;
        line-height: 68rpx;
        border-radius: 8rpx;
        color: #ffffff;
        text-align: center;
        background: #3377ff;
        margin-left: 24rpx;
        margin-top: 24rpx;
    }
}
.title {
    font-size: 28rpx;
    color: #333a47;
}
.infoimg {
    width: 140rpx;
    height: 140rpx;
    border-radius: 16rpx;
    margin: 24rpx 12rpx;
}
.store {
    padding: 24rpx;
    background: white;
    border-radius: 24rpx;
    margin: 0 32rpx 24rpx;
}
.storeImg {
    width: 96rpx;
    height: 96rpx;
    border-radius: 16rpx;
    margin-right: 16rpx;
}
.storeTitle {
    color: #00091a;
    font-size: 32rpx;
    margin-bottom: 8rpx;
}
.address {
    width: 48rpx;
    height: 48rpx;
    display: block;
    margin: 0 auto;
}
.addressText {
    color: #999ca3;
    font-size: 24rpx;
}
.salesVolume {
    color: #999ca3;
    font-size: 28rpx;
}
.detailed {
    color: #333a47;
    font-size: 28rpx;
    margin-bottom: 32rpx;
}
</style>
